<template>
  <view class="container">
    <!-- 蓝色头部 -->
    <view class="blue-header">
      <view class="navbar">
        <view class="back-btn" @click="onBack">
          <uni-icons type="left" size="24" color="#ffffff"></uni-icons>
        </view>
        <view class="title">优惠券</view>
      </view>
    </view>

    <!-- 白色内容区 -->
    <view class="white-content">
      <view
        class="coupon-card"
        v-for="(item, index) in couponList"
        :key="index"
        @tap="onCouponTap(item)"
      >
        <!-- 优惠券背景图片 -->
        <image 
          class="coupon-image" 
          src="/static/my-item/组 5@2x.png" 
          mode="widthFix"
        ></image>
        
        <!-- 优惠券内容（覆盖在图片上） -->
        <view class="coupon-content">
          <!-- 左侧金额 -->
          <view class="coupon-left">
            <text class="unit">￥</text>
            <text class="money">{{ item.money }}</text>
          </view>
          
          <!-- 中间信息 -->
          <view class="coupon-center">
            <text class="rule">满{{ item.rules }}元可用</text>
            <text class="area">仅限于{{ item.area }}使用</text>
            <text class="date">{{ item.data }}</text>
          </view>
          
          <!-- 右侧按钮 -->
          <view class="coupon-right">
            <button
              class="btn"
              :class="'status-' + item.status"
              @tap.stop="handleReceive(item)"
            >
              {{ item.status === 0 ? '领取' : '已领取' }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponList: [
        { money: 20, rules: 200, area: '中国石化', status: 0, data: '2020.04.11-2023.05.11' },
        { money: 20, rules: 200, area: '中国石化', status: 1, data: '2020.04.11-2023.05.11' }
      ]
    };
  },
  methods: {
    onBack() {
      uni.navigateBack();
    },
    onCouponTap(item) {
      // 跳转到券详情或可用门店列表
      uni.showToast({ title: '查看券详情', icon: 'none' });
    },
    handleReceive(item) {
      if (item.status === 0) {
        item.status = 1;
        uni.showToast({ title: '领取成功', icon: 'success' });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* ****** 通用 ****** */
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* ****** 头部 ****** */
.blue-header {
  position: relative;
  background-color: #007aff;
  color: #fff;
  padding-bottom: 150rpx;
}
.navbar {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 88rpx;
}
.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 38rpx;
  font-weight: 400;
}

/* ****** 内容区 ****** */
.white-content {
  position: relative;
  z-index: 10;
  width: 90%;
  margin: -100rpx auto 0;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20rpx;          // 券与券间距
}

/* ****** 优惠券卡片 ****** */
.coupon-card {
  position: relative; /* 父容器设为相对定位 */
  width: 100%;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden; /* 隐藏超出容器的内容 */
}

/* 优惠券背景图片 */
.coupon-image {
  width: 100%;
  display: block; /* 去除图片底部间隙 */
}

/* 优惠券内容（覆盖在图片上） */
.coupon-content {
  position: absolute; /* 绝对定位，覆盖在图片上 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 30rpx;
}

/* 左侧金额 */
.coupon-left {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  color: white;
  margin-right: 30rpx;
  .unit { font-size: 28rpx; }
  .money { font-size: 72rpx; font-weight: 600; }
}

/* 中间信息 */
.coupon-center {
	margin-left: 40rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  .rule { font-size: 30rpx; color: #333; font-weight: 500; }
  .area { font-size: 24rpx; color: #666; }
  .date { font-size: 22rpx; color: #999; }
}

/* 右侧按钮 */
.coupon-right {
  flex-shrink: 0;
  .btn {
    min-width: 120rpx;
    height: 60rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    line-height: 60rpx;
    border-radius: 40rpx;
    text-align: center;
    color: #fff;
    border: none;
  }
  .status-0 { background: #ff6030; }
  .status-1 { background: #ccc; }
}
</style>
